<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<style>
.form-item {
	margin: 10px 10px;
}

.form-item>label {
	letter-spacing: 3px;
	width: 110px;
	text-align: right;
	display: inline-block;
}

.form-item>label:after {
	content: ":";
}

.form-item input[type=text] {
	width: 100px;
}

.form-item.required>label:before {
	content: "*";
	color: red;
}

#tabs1 {
	width: 95%;
	height: 230px;
	border: 1px solid none;
	margin: 7px;
}

#tabs2 {
	width: 94%;
	height: 150px;
	border: 1px solid none;
	margin: 7px;
}

#tabs3 {
	width: 95%;
	height: 230px;
	border: 1px solid none;
	margin: 7px;
}
</style>
<script>
	function GetValue(obj) {
		var id = obj;
		var optionString = "<option grade=\'请选择阶段名称\' selected = \'selected\'>--请选择阶段名称--</option>";
		$.get("jiaoxue/neirong/" + id,
						function(rs) {
							if (rs.success) {
								var data = rs.message;
								for (var i = 0; i < data.length; i++) {
									optionString += "<option value=\""+data[i].chapterName+"\"";  
	                      optionString += ">"+ data[i].chapterName + "</option>"; //动态添加数据  
								}
								$("select[id=chapter]").empty();
								$("select[id=chapter]").append(optionString);
							} else {
								$.message.alert("提示错误！")
							}
						});
	}
	 function test1(obj){
		$("#tabs1").show();
		$("#tabs2").hide();
		$("#tabs3").hide();
	}
	function test2(obj){
		$("#tabs2").show();
		$("#tabs1").hide();
		$("#tabs3").hide();
	}
	function test3(obj){
		$("#tabs3").show();
		$("#tabs1").hide();
		$("#tabs2").hide();
	} 
	
	 switch($("input[name=timu]:checked").attr("id")){
	 case "timu1":
			$("#tabs1").show();
			$("#tabs2").hide();
			$("#tabs3").hide();
		   break;
	 case "timu2":
			$("#tabs2").show();
			$("#tabs1").hide();
			$("#tabs3").hide();
		   break;
	 case "timu3":
			$("#tabs3").show();
			$("#tabs1").hide();
			$("#tabs2").hide();
		   break;
	 }
</script>
<form id="addTitleForm" method="post" enctype="multipart/form-data">
	<h3 style="text-align: center; margin-top: 30px;">${timu==null?'添加':'编辑'}题目信息详情</h3>
	<br /> <span style="margin-left: 20px;">注：其中 <span
		style="color: red;">*</span> 为必填选项
	</span> <input type="hidden" value="${timu.titleId }" name="titleId"> <br />
	<input type="hidden" value="${userinfo }" name="userId">
	<div class="form-item required">
		<label for="">所属阶段</label> <select id="phase" name="phase"
			style="height: 24px; border-radius: 5px; border-color: dodgerblue;"
			onchange="GetValue(this.value)">
			<c:forEach items="${phase }" var="x">
				<option value="${x.phaseId }" ${x.phaseId==r.phaseId? 'selected':'' }>${x.phaseName }</option>
			</c:forEach>
		</select> <label for="">所属章节</label> <select id="chapter" name="chapter"
			style="height: 24px; border-radius: 5px; border-color: dodgerblue;">
			<c:forEach items="${chapter }" var="x">
				<option value="${x.chapterName }" ${x.chapterName==timu.chapterId.chapterName?'selected':'' }>${x.chapterName }</option>
			</c:forEach>
		</select>
	</div>
	<div class="form-item required">
		<label for="">题目类型</label>&nbsp;
		<lable> 选择题&nbsp;	 <input id="timu1" name="timu" value="选择题" onchange="test1(this.value)" type="radio" ${empty timu||timu.titleType=='选择题'?'checked':'' }/></lable>&nbsp;&nbsp;
		<lable>  判断题&nbsp; <input id="timu2" name="timu" value="判断题" onchange="test2(this.value)"  type="radio" ${timu.titleType=='判断题'?'checked':'' } /></lable>&nbsp;&nbsp;
		<lable>  编码题&nbsp; <input id="timu3" name="timu" value="代码题" onchange="test3(this.value)"  type="radio" ${timu.titleType=='代码题'?'checked':'' }  /></lable>
	</div>
	<div class="form-item required">
		<label for="">题目</label><br />
		<textarea name="titleName" style="width: 350px; height: 80px; margin-left: 122px;">${timu.title }</textarea>

	</div>
	<div class="form-item">
		<label for="">上传效果图</label>
		<input name="file" type="file" />
	</div>
	<div id="tabs1" style="display: block;">
			<div class="form-item required">
				<label id="A" for=""  style="margin-left: -8px;">A选项</label><br />
				<textarea name="optionA" style="width: 400px; height: 60px; margin-left: 110px;">${timu.optionA }</textarea>
				<br /> <label id="B" for=""  style="margin-left: -8px;">B选项</label><br />
				<textarea  name="optionB"  style="width: 400px; height: 60px; margin-left: 110px;">${timu.optionB }</textarea>
				<br /> <label id="C" for=""  style="margin-left: -8px;">C选项</label><br />
				<textarea  name="optionC"  style="width: 400px; height: 60px; margin-left: 110px;">${timu.optionC }</textarea>
				<br /> <label id="D" for=""  style="margin-left: -8px;">D选项</label><br />
				<textarea  name="optionD"  style="width: 400px; height: 60px; margin-left: 110px;">${timu.optionD }</textarea>
				<br /><br /> <label for=""  style="margin-left: -8px;">选择题答案</label>
				<select name="answerA" style="height: 24px; border-radius: 5px; border-color: dodgerblue;">
					<option value="A" ${timu.titleAnswer=='A'?'selected':'' } >A</option>
					<option value="B" ${timu.titleAnswer=='B'?'selected':'' } >B</option>
					<option value="C" ${timu.titleAnswer=='C'?'selected':'' } >C</option>
					<option value="D" ${timu.titleAnswer=='D'?'selected':'' } >D</option>
					<option value="AD" ${timu.titleAnswer=='AD'?'selected':'' } >AD</option>
					<option value="AB" ${timu.titleAnswer=='AB'?'selected':'' } >AB</option>
					<option value="AC" ${timu.titleAnswer=='AC'?'selected':'' } >AC</option>
					<option value="BC" ${timu.titleAnswer=='BC'?'selected':'' } >BC</option>
					<option value="BD" ${timu.titleAnswer=='BD'?'selected':'' } >BD</option>
					<option value="CD" ${timu.titleAnswer=='CD'?'selected':'' } >CD</option>
				</select>
			</div>
	</div>
	<div id="tabs2" style="display: none;">
		<div class="form-item required">
			<label for=""  style="margin-left: -8px;">正确答案</label>
			&nbsp; 对： <input name="answerB" value="对" type="radio" ${timu.titleAnswer=='对'?'checked':'' } checked="checked" />&nbsp;&nbsp;
				      错:&nbsp; <input	name="answerB" value="错" type="radio" ${timu.titleAnswer=='错'?'checked':'' }/>&nbsp;&nbsp;
		</div>
	</div>
	<div id="tabs3" style="display: none;">
			<div class="form-item required">
				<label for="" style="margin-left: -8px;">正确答案</label><br />
				<textarea name="answerC" style="width: 380px; height: 180px; margin-left: 100px;">${timu.titleAnswer }</textarea>
				<br />
			</div>
	</div>
</form>